import React, { FC } from 'react'
import { Layout, Menu } from 'antd'
import { inject, observer } from 'mobx-react';
import { routerList } from './../utils/routerlist';
import { useLocation, useNavigate } from 'react-router-dom';

const { Sider } = Layout;
const {SubMenu} = Menu;
const SideMenu: FC<any> = ({
    uinfo,
    data
}) => {
    const navigate = useNavigate()
    const location = useLocation()
    const {userInfo} = uinfo;
    const {collapsed}=data
    const menuClick = (obj:any)=>{
        console.log(obj)
        navigate(obj.key)
    }
    const renderMenuItem = (list:any)=>{
        if(userInfo){
            const {role} = userInfo;
            return list.map((item:any)=>{
                if(item.children){
                    // 递归 
                    if(role>=item.premission){
                        return (<SubMenu key={item.path} title={item.title} icon={item.icon} >
                            {renderMenuItem(item.children)}
                    </SubMenu>)
                    }else{
                        return null;
                    }
                  
                }else{
                    if(role>=item.premission){
                        return (
                            <Menu.Item key={item.path} icon={item.icon}>
                                {item.title}
                            </Menu.Item>
                        )
                    }else{
                        return null; // 没有权限 
                    }
                }
            })
        }else{
            return null;
        }
    }
    console.log(location)
    console.log(location.pathname.split('/').slice(0,3).join('/'))
    return (
        <Sider style={{height:'100vh',overflow:'auto'}} collapsed={collapsed}>
            <div className="logo-box" style={{ width: '100%', padding: 20, }}>
                <img src={require("../assets/images/fg.png")} alt="" style={{ width: '100%', height: 60, borderRadius: '50%' }} className="logo" />
            </div>
            <Menu
               defaultSelectedKeys={[location.pathname]}
               defaultOpenKeys={[location.pathname.split('/').slice(0,3).join('/')]}
               selectedKeys={[location.pathname]}
                mode="inline"
                theme="dark"
             
                onClick={menuClick}
            >
               {renderMenuItem(routerList)}
            </Menu>
        </Sider>
    )
}

export default inject('uinfo','data')(observer(SideMenu)) 